<template>
  <el-card class="content">
    <div class="video-list">
      <el-row v-for="i in 2" :key="i">
        <el-col :span="6" v-for="j in 4" :key="j">
          <div
            v-if="currentPage * pageSize + (i - 1) * 4 + j - 1 < videos.length"
            class="video-warp"
          >
            <div style="text-align: center">
              <img
                @click="openVideo(currentPage * pageSize + (i - 1) * 4 + j - 1)"
                class="img"
                :src="`/public/${
                  videos[currentPage * pageSize + (i - 1) * 4 + j - 1].img
                }`"
              />
            </div>
            <div
              @click="openVideo(currentPage * pageSize + (i - 1) * 4 + j - 1)"
              class="title"
            >
              <span>{{
                videos[currentPage * pageSize + (i - 1) * 4 + j - 1].name
              }}</span>
            </div>
            <el-row>
              <el-col :span="6" :offset="17">
                <el-button
                  @click="
                    openVideo(currentPage * pageSize + (i - 1) * 4 + j - 1)
                  "
                  type="primary"
                  size="small"
                  >观看视频</el-button
                >
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-pagination
      @current-change="pageChange"
      layout="total, jumper, ->, prev, pager, next"
      :total="videos.length"
      :page-size="pageSize"
      :pager-count="7"
      background
    >
    </el-pagination>

    <el-dialog
      :title="videos[currentIndex].name"
      :visible.sync="isOpenVideo"
      width="70%"
      top="15px"
      @close="closeDialog"
    >
      <div class="player">
        <video
          ref="video"
          controls="controls"
          style="width: 100%; height: auto"
          :src="`/public/${videos[currentIndex].src}`"
        ></video>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "WorkerEducation",
  data() {
    return {
      videos: [
        {
          name: "下游主摄像头",
          src: "safety-management/videos/伊春尾矿库泄露事故案例.mp4",
          img: "monitor-control/下游主摄像头.png",
          watcher: 1111,
        },
        {
          name: "入水口摄像头",
          src: "safety-management/videos/尾矿库事故案例.mp4",
          img: "monitor-control/入水口摄像头.png",
          watcher: 1111,
        },
        {
          name: "出水口摄像头",
          src: "safety-management/videos/淳安尾矿库泄露事故.mp4",
          img: "monitor-control/出水口摄像头.png",
          watcher: 1111,
        },
        {
          name: "值班室摄像头",
          src: "safety-management/videos/淳安尾矿库事故.mp4",
          img: "monitor-control/值班室摄像头.png",
          watcher: 1111,
        },
        {
          name: "坝头摄像头",
          src: "safety-management/videos/尾矿库事故案例.mp4",
          img: "monitor-control/坝头摄像头.png",
          watcher: 1111,
        },
        {
          name: "水位标尺摄像头",
          src: "safety-management/videos/伊春尾矿库泄露事故案例.mp4",
          img: "monitor-control/水位标尺摄像头.png",
          watcher: 1111,
        },
      ],
      pageSize: 8,
      currentPage: 0,
      currentIndex: 0,
      isOpenVideo: false,
    };
  },
  methods: {
    pageChange(index) {
      this.currentPage = index - 1;
    },
    openVideo(index) {
      this.videos[index].watcher++;
      this.currentIndex = index;
      this.isOpenVideo = true;
    },
    closeDialog() {
      this.$refs.video.pause();
    },
  },
};
</script>

<style scoped>
.content {
  height: 87vh;
  margin-right: 5px;
  overflow: auto;
}
.video-warp {
  height: 30vh;
  margin: 12px;
  background-color: #f9f9f9;
  border-radius: 5px;
}
.video-list {
  height: 77vh;
}
.img {
  max-height: 25vh;
  width: 17vw;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 5px;
  cursor: pointer;
}
.img:hover {
  position: relative;
  transform: translateY(-2px);
}
.small-font {
  font-size: 12px;
  color: #909399;
}
.title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.1em;
  cursor: pointer;
}
.title:hover {
  color: #409eff;
}
.player {
  height: 100%;
  width: 100%;
}
</style>